<template>

  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>代理商申请</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <!--顶部-->
        <el-row style="padding-bottom: 10px;text-align: left">
          <el-input placeholder="代理名称或手机号" v-model="selectkey" class="input-with-select" style="width: 200px">
          </el-input>
          <el-button type="primary" @click="getStart()">搜索</el-button>
          <el-button type="danger" @click="deletesel" style="float: right">删除</el-button>
        </el-row>
        <!--表格-->
        <el-table
          border
          @selection-change="handleSelectionChange"
          align="left"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            type="selection"
            fixed="left"
            width="35">
          </el-table-column>
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称">
          </el-table-column>
          <el-table-column
            label="性别">
            <template slot-scope="scope">
              {{ scope.row.gender==1?'男':'女'}}
            </template>
          </el-table-column>
          <el-table-column
            label="身份证照片">
            <template slot-scope="scope">
              <el-popover
                v-if="scope.row.license"
                placement="bottom"
                trigger="hover">
                <div style="height: 300px;overflow-y: auto">
                  <img v-for="i in scope.row.license.split(',')" :src="i" alt="" width="300px" style="display: block">
                </div>
                <!--<el-button slot="reference" size="small" type="text">查看图片</el-button>-->
                <img slot="reference" :src="scope.row.license.split(',')[0]" alt="" width="60px" height="60px">
              </el-popover>
              <span v-if="!scope.row.license">无</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号">
          </el-table-column>
          <el-table-column
            prop="address"
            label="所在地">
          </el-table-column>
          <el-table-column
            label="申请原因">
            <template slot-scope="scope">
              <el-popover
                placement="bottom"
                trigger="click">
                <div style="max-width: 300px;max-height: 300px;overflow-y: auto">{{scope.row.app_reason}}</div>
                <div slot="reference" style="width: 100%;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">
                  {{scope.row.app_reason}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="changeMes(scope.row.id,0)" size="small" type="text">删除</el-button>
              <el-button @click="changeMes(scope.row.id,1)" size="small" type="text">通过</el-button>
              <el-button @click="showNo(scope.row.id,3)" size="small" type="text">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" style="margin-top: 15px">
          <el-pagination
            style="text-align: right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dataTotal">
          </el-pagination>
        </el-col>

        <!--拉黑日期范围选择-->
        <el-dialog title="拒绝理由" :visible.sync="noVisible" width="380px" :modal-append-to-body="false">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="noValue">
          </el-input>
          <div slot="footer" class="dialog-footer">
            <el-button @click="noVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitState(userId,3)">确 定</el-button>
          </div>
        </el-dialog>
      </el-row>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "AgentApply",
    activated() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      this.getStart()
    },
    data() {
      return {
        tableData: [],
        pageSize: 10,
        currentPage: 1,
        selectkey: '',
        dataTotal: 0,
        multipleSelection: [],
        formLabelWidth: '80px',
        noValue:'',
        noVisible:false,
        userId:'',
      }
    },
    methods: {
      // 获取数据
      getStart() {
        let thi = this
        const por = {
          page: thi.currentPage,
          pageSize: thi.pageSize,
          key:this.selectkey,
          type:this.$store.state.login.typeApply,
        }
        thi.mySelectAll('pendingAgentList', por).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      //显示拒绝原因弹窗
      showNo(id){
        this.userId=id
        this.noVisible=true
      },
      //状态改变提示
      changeMes(id, state) {
        var heeh = '该'
        var caozuo = '禁用'
        if (id.length > 1) {
          heeh = '这些'
        }
        if (state == 0) {
          caozuo = '删除'
        }else  if (state == 1) {
          caozuo = '通过'
        }
        let thi = this
        thi.$confirm('此操作将'+caozuo + heeh+'信息', '是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          thi.submitState(id, state)
        }).catch(() => {
          thi.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //状态改变
      submitState(id, state) {
        let thi = this
        const por = {
          id: id,
          state: state,
          refuse_reason:this.noValue
        }
        thi.mySubmit('disposeAgent', por).then(function (code) {
          if (code == 200) {
            thi.getStart()
          }
        })
      },
      //多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //批量状态改变合并ID
      deletesel() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择要删除的分类!'
          });
          return
        } else {
          var ids = '';
          this.multipleSelection.forEach(function (avalue, aindex, aarr) {
            if (aindex == 0) {
              ids = avalue.id
            } else {
              ids = ids + ',' + avalue.id
            }
          });
          this.changeMes(ids, 0)
        }
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getStart()
      },
      //跳转页面
      handleCurrentChange(val) {
        this.currentPage = val
        this.getStart()
      },
    }
  }
</script>

<style scoped>
  .admin-body {
    width: 100%;
  }
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
</style>
